<template>
  <div>
    <nav>
      <ul>
        <li :class="btn1" @click="menzhen">门诊费用统计</li>
        <li :class="btn2" @click="chufang">门诊处方统计</li>
        <li :class="btn3" @click="guahao">门诊挂号费统计</li>
        <li :class="btn4" @click="shoufei">收费员统计</li>
      </ul>
      
    </nav>
    <!-- 下面是否显示 -->
    <vue1 v-if="flag == 1" />
    <vue2 v-if="flag == 2" />
    <vue3 v-if="flag == 3" />
    <vue4 v-if="flag == 4" />
    <!-- <router-view></router-view> -->
  </div>
</template>

<script lang="ts" >
import vue1 from "@/components/statistics/1.vue";
import vue2 from "@/components/statistics/2.vue";
import vue3 from "@/components/statistics/3.vue";
import vue4 from "@/components/statistics/4.vue";
import { ref } from "vue";
export default {
  components: {
    vue1,
    vue2,
    vue3,
    vue4,
  },

  setup() {
    let btn1 = ref("btnOne");
    let btn2 = ref("btnTwo");
    let btn3 = ref("btnTwo");
    let btn4 = ref("btnTwo");
    const flag = ref(1);
    const menzhen = () => {
      btn1.value = "btnOne";
      btn2.value = "btnTwo";
      btn3.value = "btnTwo";
      btn4.value = "btnTwo";
      flag.value = 1;
    };
    const chufang = () => {
      btn1.value = "btnTwo";
      btn2.value = "btnOne";
      btn3.value = "btnTwo";
      btn4.value = "btnTwo";
      flag.value = 2;
    };
    const guahao = () => {
      btn1.value = "btnTwo";
      btn2.value = "btnTwo";
      btn3.value = "btnOne";
      btn4.value = "btnTwo";
      flag.value = 3;
    };
    const shoufei = () => {
      btn1.value = "btnTwo";
      btn2.value = "btnTwo";
      btn3.value = "btnTwo";
      btn4.value = "btnOne";
      flag.value = 4;
    };
    return { menzhen, chufang, flag, guahao, shoufei, btn1, btn2, btn3, btn4 };
  },
};
</script>

<style  scoped>
ul {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  height: 45;
  list-style: none;
  text-align: center;
}
ul li {
  width: 227px;
  height: 44px;
  line-height: 44px;
  background-color: #e5e5e5;
  color: #676a6d;
  /* text-decoration: none; */
}
.btnOne {
  background-color: #00aaff;
  color: white;
}
.btnTwo {
  background-color: #e5e5e5;
  color: #676a6d;
}
nav {
  margin-bottom: 20px;
}
</style>